<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page contentType="text/html;charset=UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
    <link href="../../themes/css/ui.common.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/css/ui.child.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/css/ui.tips.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/base/jquery.ui.button.css" rel="stylesheet" type="text/css" />
    <link id="skin_css" rel="stylesheet" type="text/css" href="../../themes/css/ui.c.blue.css" />
    <link rel="stylesheet" href="../themes/css/ui.pagination.css" type="text/css"></link>
    <script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui-1.8.custom.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.json-2.2.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="../../Scripts/ui.admincp.js" type="text/javascript" charset="UTF-8"></script>
    <script src="../../Scripts/ui.tips.js" type="text/javascript"></script>
    <script type="text/javascript" src="../Scripts/jquery.pagination.js"></script>
    <script src="../../Scripts/ui.default.js" type="text/javascript" charset="UTF-8"></script>
    <script src="../../Scripts/ui.clientDateHelper.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var years = generateYears(2009, 3);
            $("#startYearSelector,#endYearSelector").html(years);
            var months = generateMonths();
            $("#startMonthSelector,#endMonthSelector").html(months).change(function () {
                var sender = $(this).attr("selectorType");
                var monthSelector = "#" + sender + "MonthSelector option:selected";
                var yearSelector = "#" + sender + "YearSelector option:selected";
                var daySelector = "#" + sender + "DaySelector";
                var month = $(monthSelector).val();
                var year = $(yearSelector).val();

                if (year == -1) {
                    return;
                }

                if (month == -1) {
                    $(daySelector).html("");
                } else {
                    var days = generateDays(year, month);
                    $(daySelector).html(days);
                }
            });

            $("#SearchButton").click(function () {
                var accountInfoValueClientObject = { staffIds: "", staffNames: "", inOrOut: "", startDate: "", endDate: "", state: "" };

                accountInfoValueClientObject.staffIds = $("#staffSelector").val();
                accountInfoValueClientObject.endDate = getSelectedOptionText("#endYearSelector", "") + getSelectedOptionText("#endMonthSelector", "-") + getSelectedOptionText("#endMonthSelector", "-");
                accountInfoValueClientObject.startDate = getSelectedOptionText("#startYearSelector", "") + getSelectedOptionText("#startMonthSelector", "-") + getSelectedOptionText("#startMonthSelector", "-");
                accountInfoValueClientObject.inOrOut = $("#inOrOutSelector").val();
                accountInfoValueClientObject.state = $("#accountStateSelector").val();

                refreshData(accountInfoValueClientObject);
                return false;
            });
        });


        function refreshData(searchArg) {
            alert("You can use this arg to query data via ajax..:   " + $.toJSON(searchArg));
            //            $.post("", searchArg, function (data) {
            //                //represent.. html
            //            }, "json");
        }

        function getSelectedOptionText(selectorId, prefix) {
            var text = $.trim($(selectorId + " option:selected").text());
            if (text.length != 0)
                text = prefix + text;
            return text;
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="PageChild_Title">
        <img src="../../themes/images/default/icons/archives.png" class="PageChild_Tbtnpic" />
        <span class="PageChild_separate"></span><span class="PageChild_TbtnText">
            <h2>
                账单列表</h2>
        </span><span class="PageChild_separate"></span>
        <div id="marker" class="red-tips">
        </div>
        <div class="clear">
        </div>
    </div>
    <!--数据列表-->
    <!--工具栏按钮-->
    <div class="PageChild_Line">
        <span class="PageChild_ToolItem" style="width: 200px;"></span>
    </div>
    <div class="clear">
    </div>
    <div>
        <div class="PageChild_Where">
            <table>
                <tr>
                    <td>
                        起始日期:
                    </td>
                    <td>
                        <select id="startYearSelector">
                        </select>
                        年
                    </td>
                    <td>
                        <select id="startMonthSelector" selectortype="start">
                        </select>月
                        <select id="startDaySelector" name="D2">
                        </select>日
                    </td>
                    <td>
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td>
                        结束日期:
                    </td>
                    <td align="left">
                        <select id="endYearSelector">
                        </select>
                        年
                    </td>
                    <td colspan="1">
                        <select id="endMonthSelector" selectortype="end">
                        </select>月
                        <select id="endDaySelector" name="D1">
                        </select>日
                    </td>
                    <td>
                        &nbsp;
                    </td>
                </tr>
                <tr class="mtd">
                    <td>
                        类型:
                    </td>
                    <td align="left">
                        <select id="inOrOutSelector">
                            <option value="-1"></option>
                            <option value="1">出账</option>
                            <option value="2">入账</option>
                        </select>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td>
                        账单状态:
                    </td>
                    <td>
                        <select id="accountStateSelector">
                            <option value="-1"></option>
                            <option value="-2">审核通过</option>
                            <option value="2">未审核通过</option>
                            <option value="3">未审核</option>
                            <option value="4">已删除</option>
                        </select>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td>
                        申请人:
                    </td>
                    <td>
                        <select id="staffSelector">
                            <option value="-1"></option>
                            <option value="1">Admin</option>
                        </select>
                    </td>
                    <td>
                        &nbsp; <span class="tips">
                            <input type="text" name="staffNames" value="" /></span>
                    </td>
                    <td>
                        <span class="tips">多个名字逗号分割进行搜索...</span>
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                        <button id="SearchButton" class="o-btn">
                            搜索</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="PageChild_List">
        <table width="100%" border="0" cellspacing="0">
            <tbody class="PageChild_List_head">
                <tr>
                    <td width="27">
                        <img alt="" src="../../themes/images/default/icons/pcde_314.png" width="16" height="16" />
                    </td>
                    <td width="200">
                        类型
                    </td>
                    <td width="300">
                        账单名称
                    </td>
                    <td>
                        金额
                    </td>
                    <td width="120">
                        申请人
                    </td>
                    <td width="120">
                        申请日期
                    </td>
                    <td>
                        编辑
                    </td>
                    <td class="td_width40 hiddenObject">
                        删除
                    </td>
                </tr>
            </tbody>
            <tbody id="goodsInfoHtmlList" class="PageChild_List_main">
                <tr id="tr_OrderInfo_____1" class="hiddenObject">
                    <td width="16" class="td_width25">
                        &nbsp;
                    </td>
                    <td>
                        <span id="txt_OrderInfo_CategoryName">体育用品&nbsp;</span>
                    </td>
                    <td>
                        <span id="txt_OrderInfo_Name">足球&nbsp;</span>
                    </td>
                    <td>
                        <span id="txt_OrderInfo_Total">20&nbsp;</span> /<span class="red-tips" id="txt_OrderInfo_Remain">&nbsp;10</span>
                    </td>
                    <td title="单击内容进行编辑.回车提交更新.">
                        <span oid="1" class="textPanel" id="content_1">aa </span>
                        <div id="editorArea_1" class="editorArea hiddenObject">
                            <input id="editor_1" class="textBox easyui-numberbox" type="text" style="width: 70px;"
                                maxlength="10" oid="1" min="1" max="20" />
                        </div>
                    </td>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        <a class="editButton" id="sender_1" href="javascript:void(0);" state="0" onclick="switchSave(1,true);">
                            <img id="switcher_1" src="../../themes/icons/edit.png" title="进行编辑" />
                        </a>&nbsp;
                    </td>
                    <td>
                        <a href="javascript:;" onclick='location="goodslist!delete.action?delete_id=${item.categoryId}"'>
                            <img src="../../themes/icons/delete.png" />
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    </form>
    <script type="text/javascript"> 
    </script>
</body>
</html>
